<!-- 企业首页 -->
<template>
    <div class="enterprise-index">
        <header class="flex-row-space-between">
            <div class="logo-contain flex-center">
                <div class="logo inline-block"></div>
            </div>
            <div class="tool flex-center">

<el-popover
    placement="bottom"
    width="200"
    trigger="hover">
    <img src="@/assets/image/qrcode_wx.jpg" width="180" alt="">
    <i class="wechat-icon icon-contain inline-block pointer mr40" title="微信" slot="reference"></i>
</el-popover>

<el-popover
    placement="bottom"
    width="200"
    trigger="hover">
    <img src="@/assets/image/qrcode_qq.png" width="180" alt="">
    <i class="QQ-icon icon-contain inline-block pointer mr40" title="QQ" slot="reference"></i>
</el-popover>

                <i class="phone-icon icon-contain inline-block pointer mr20" title="电话号码"></i>
                <span class="fs14 white mr20">
                    0595-87517718
                </span>
                <el-dropdown @command="setFont">
                    <span class="el-dropdown-link">
                        <span class="fs14 green">
                            {{ fonts }}
                        </span>
                        <i class="el-icon-caret-bottom green fs18"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="简">
                            简
                        </el-dropdown-item>
                        <el-dropdown-item command="繁">
                            繁
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <a @click="dialogVisible = true" class="green fs14 fw400 ml30 mr5">
                    企业服务
                </a>
                <template v-if="accountid > 0">
                    <router-link class="green fs14 fw400 ml20 mr30" :to="userType != 'company'? '/account' : '/enterprise/center'">
                        <span>{{nickname}}</span>
                    </router-link>
                </template>
                <template v-else>
                    <router-link to="/login" class="green fs14 fw400 ml20 mr30">
                        个人登录
                    </router-link>
                    <router-link to="/reg" class="green fs14 fw400">
                        注册
                    </router-link>
                    <div class="column-line"></div>
                    <router-link to="/MainLogin" class="green fs14 fw400 ml20 mr30">
                        企业登录
                    </router-link>
                    <router-link to="/enterprise-register" class="green fs14 fw400">
                        注册
                    </router-link>
                </template>

            </div>
        </header>
        <navIndex></navIndex>
        <div class="ad-carousel-contain">
            <el-carousel trigger="click" height="719px" :autoplay="true" style="min-width: 1200px;">
                <el-carousel-item v-for="item in bannerList" :key="item.id">
                    <img :src="item.imgUrl" class="responsive-img-fit" alt="图片">
                </el-carousel-item>
            </el-carousel>
            <div class="ad-tool flex-column-center">
                <div>
                    <div v-if="userType">
                        <span class="jobActive fs20 bold white ml25 mr25 pointer" v-if="userType != 'company'">
                            找工作
                        </span>
                        <router-link to="/looking-for-talent" class="jobActive fs20 bold white ml25 mr25 pointer" v-else>
                            找人才
                        </router-link>
                    </div>
                    <div v-else>
                        <span class="jobActive fs20 bold white ml25 mr25 pointer">
                            找工作
                        </span>
                        <router-link to="/looking-for-talent" class="fs20 bold grey pointer">
                            找人才
                        </router-link>
                    </div>
                    <div class="search-contain flex-row-start mt10">
                        <div class="job-search-bg search-input-contain">
                            <input type="text" v-model="search" :placeholder="userType != 'company' ? '请输入您要寻找的职位！' : '请输入您要寻找的人才信息！'">
                        </div>
                        <div class="search-button-contain mt10">
                            <button class="pointer" title="搜索" @click="goToSearch('/job')">
                                <i class="inline-block search-button-icons"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="ad-title" title="泉台人力银行人才服务中心"></div>
                <div  class="sec-nav">
                    <router-link to="/looking-for-talent" title="我要招人才">
                        <img src="@/assets/image/enterprise/1.png" alt="我要招人才" class="mr30">
                    </router-link>
                    <router-link to="/service/activity" title="我要报活动">
                        <img src="@/assets/image/enterprise/2.png" alt="" class="mr30">
                    </router-link>
                    <router-link to="/service/product" title="人才服务">
                        <img src="@/assets/image/enterprise/3.png" alt="" class="mr30">
                    </router-link>
                    <router-link to="/job" title="我要找工作">
                        <img src="@/assets/image/enterprise/4.png" alt="" class="mr30">
                    </router-link>
                    <router-link to="/policy/support" title="我要创业">
                        <img src="@/assets/image/enterprise/5.png" alt="" class="mr30">
                    </router-link>
                    <router-link to="/policy/support" title="政策匹配">
                        <img src="@/assets/image/enterprise/6.png" alt="" class="mr30">
                    </router-link>
                </div>
            </div>
            <nav class="flex-row-space-around">
                <router-link to="/" class="nav-item inline-block fs24 acive">
                    首页
                </router-link>

                <span v-if="userType" style="display: contents;">
                    <router-link to="/job" class="nav-item inline-block fs24" v-if="userType != 'company'">
                        就业
                    </router-link>
                    <router-link to="/fieldwork" class="nav-item inline-block fs24" v-if="userType != 'company'">
                        见习实习
                    </router-link>
                    <router-link to="/looking-for-talent" class="nav-item inline-block fs24" v-if="userType == 'company'">
                        人才
                    </router-link>
                </span>
                <span v-else style="display: contents;">
                    <router-link to="/job" class="nav-item inline-block fs24">
                        就业
                    </router-link>
                    <router-link to="/fieldwork" class="nav-item inline-block fs24">
                        见习实习
                    </router-link>
                    <router-link to="/looking-for-talent" class="nav-item inline-block fs24">
                        人才
                    </router-link>
                </span>

                <router-link to="/policy" class="nav-item inline-block fs24">
                    智慧政策
                </router-link>
                <router-link to="/service" class="nav-item inline-block fs24">
                    服务联盟
                </router-link>
                <router-link to="/about" class="nav-item inline-block fs24">
                    关于我们
                </router-link>
            </nav>
        </div>
        <section class="warp white-bg">
            <div class="container">
                <ul>
                    <li>
                        <div class="flex-column-center mb45">
                            <h2 class="fs36 green1 bold mb10">魅力台商</h2>
                            <h2 class="fs14 green2">CHARMING TAIWAN BUSINESSMEN</h2>
                           <!-- <img src="@/assets/image/enterprise/mlts-cn.png" class="mb15" alt="图片">
                            <img src="@/assets/image/enterprise/mlts-en.png" alt="图片">-->
                        </div>
                        <div class="mlts-btns-contain flex-row-space-between">
                            <div class="mlts-btns pointer text-c"
                                 @click="parkActive = 'taiShang'"
                                 :class="{active: parkActive === 'taiShang'}"
                            >
                                台商区介绍
                            </div>
                            <div class="mlts-btns pointer text-c"
                                 @click="parkActive = 'yuanQu'"
                                 :class="{active: parkActive === 'yuanQu'}"
                            >
                                园区介绍
                            </div>
                        </div>
                        <div v-show="parkActive === 'taiShang'" class="mlts-detail flex-row-start pt30 ">
                            <div class="mlts-img-contain">
                                <img :src="require('../../assets/image/enterprise/' + parkNavImg[parkNavActive])"
                                     class="responsive-img-fit">
                                <ul class="pt40 text-c">
                                    <li class="fs18 bold white mb25 pointer"
                                        v-for="(item, key) in parkNav"
                                        :key="item.id"
                                        :class="{active: parkNavActive === key}"
                                        @click="parkNavActive = key"
                                    >
                                        {{ item.text }}
                                    </li>
                                </ul>
                            </div>
                            <ul class="mlts-text-contain pl35">
                                <li class="pt30 pb20 border-b"
                                    v-for="item in parkInfoList"
                                    :key="item.id"
                                >
                                    <router-link :to="`/information/details?id=${item.id}`" target="_blank" class="title-text fs16 mb15 inline-block">
                                        {{ item.title }}
                                    </router-link>
                                    <div class="content-text more-overflow-ellipsis fs14">
                                        {{ item.abstractDesc }}
                                    </div>
                                </li>
                                <li class="pt20">
                                    <el-button size="mini" round class="green-btns radius" @click="routerLink('/information')">
                                        了解更多
                                        <i class="el-icon-arrow-right"></i>
                                    </el-button>
                                </li>
                            </ul>
                        </div>
                        <div v-show="parkActive === 'yuanQu'" class="yuan-qu-contain mlts-detail pt30 ">
                            <div class="swiper-container" style="height: 315px">
                                <swiper ref="mySwiper" :options="swiperOptions">
                                    <swiper-slide v-for="(item, key) in yuanquList" :key="key">
                                        <router-link :to="`/information/details?id=${item.id}`" target="_blank">
                                            <div class="yuan-qu-item">
                                                <img :src="item.imgUrl" class="responsive-img-fit">
                                            </div>
                                            <p class="text-c fs18 black pt30 overflow-ellipsis">
                                                {{ item.title }}
                                            </p>
                                        </router-link>
                                    </swiper-slide>
                                    <div class="swiper-button-prev white" slot="button-prev"></div>
                                    <div class="swiper-button-next white" slot="button-next"></div>
                                </swiper>
                            </div>

                        </div>
                    </li>
                    <li class="mt130">
                        <div class="flex-column-center mb45">
                            <h2 class="fs36 green1 bold mb10">岗位招聘</h2>
                            <h2 class="fs14 green2">JOB RECRUITMENT</h2>
                           <!-- <img src="@/assets/image/enterprise/gwzp-cn.png" class="mb15" alt="岗位招聘">
                            <img src="@/assets/image/enterprise/gwzp-en.png" alt="岗位招聘">-->
                        </div>
                        <ul class="flex-center pb30">
                            <li class="mr20 fs18 black pointer job-item"
                                v-for="item in jobList"
                                :key="item.code"
                                :class="{'job-active': jobActive === item.code}"
                                @click="jobActive = item.code"
                            >
                                {{ item.name }}
                            </li>
                        </ul>
                        <ul class="flex-row-start">
                            <li v-for="item in allPositionList" :key="item.id" class="gwzp-detail-item mb20">
                                <router-link :to="`/internship-detail/${item.id}`" target="_blank">
                                    <h2 class="overflow-ellipsis fs18 black mb25 bold block">
                                        {{item.jobTitle}}
                                    </h2>
                                    <p class="overflow-ellipsis">
                                        {{item.companyName}}
                                    </p>
                                    <div :title="`${item.salaryStart}K-${item.salaryEnd}K`"
                                         class="price-contain overflow-ellipsis text-r white fs18 pl5 pr5">
<!--                                        {{item.salaryStart}}K-{{item.salaryEnd}}K-->
                                        <span v-if="!item.salaryStart && !item.salaryEnd">面议</span>
                                        <span v-else>{{item.salaryStart||0}}k - {{item.salaryEnd||0}}K</span>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                        <div class="flex-center mt35">
                            <div class="gwzp-see-more pointer text-c white inline-block" @click="routerLink('/job')">
                                查看更多
                            </div>
                        </div>
                    </li>
                    <li class="mt130">
                        <div class="flex-column-center mb45">
                            <h2 class="fs36 green1 bold mb10">名企招聘</h2>
                            <h2 class="fs14 green2">RUITMENT ENTERPRISE</h2>
                           <!-- <img src="@/assets/image/enterprise/rzqy-cn.png" class="mb15" alt="入驻企业">
                            <img src="@/assets/image/enterprise/rzqy-en.png" alt="入驻企业">-->
                        </div>
                        <ul class="flex-row-space-between">
                            <li class="rzqy-detail-item mb20"
                                v-for="item in InEnterprise"
                                :key="item.id"
                            >
                                <router-link :to="`/enterprise/home/${item.id}`">
                                    <div class="company-text-contain pl50 pr50 text-c pt25">
                                        <div class="logo-contain mb10 inline-block">
                                            <img :src="item.companyLogo || require('../../assets/image/default_enterprise_logo.jpg')" class="responsive-img-fit">
                                        </div>
                                        <h2 class="overflow-ellipsis fs18 white bold mb10">
                                            {{ item.companyName }}
                                        </h2>
                                        <p class="overflow-ellipsis white fs18 mb10">
                                            {{ item.contact }}
                                        </p>
                                        <p class="overflow-ellipsis white fs14 pb20">
                                            {{ item.text }}
                                        </p>
                                    </div>
                                    <div class="labels-contain flex-row-start pl20 pr20 pt20 pb20">
                                        <label :class="jobIndex == 2 ? 'inline-block pt5 pb5 pl10 pr10' : 'inline-block pt5 pb5 pl10 pr10 mr10'" style="width: 105px"
                                               v-for="(job, jobIndex) in item.companyPositionInfoList" :key="jobIndex" v-if="jobIndex <= 2">
                                           <span :title="job.jobTitle"> {{job.jobTitle}}</span>
                                        </label>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                        <!--<div class="flex-center mt10">
                            <div class="gwzp-see-more pointer text-c white inline-block">
                                查看更多
                            </div>
                        </div>-->
                    </li>
                    <li class="mt130">
                        <div class="flex-column-center mb45">
                            <h2 class="fs36 green1 bold mb10">相关资讯</h2>
                            <h2 class="fs14 green2">NEWS CENTER</h2>
                           <!-- <img src="@/assets/image/enterprise/xgzx-cn.png" class="mb15" alt="相关资讯">
                            <img src="@/assets/image/enterprise/xgzx-en.png" alt="相关资讯">-->
                        </div>
                        <div class="xgzx-labels-contain flex-row-space-between pb25">
                            <span class="inline-block pt20 pb20 grey-bg pointer bold black fs24 text-c"
                                  v-for="(item, key) in newsLabel"
                                  :key="item.id"
                                  :class="{'news-active': newsActive === key}"
                                  @click="newsActive = key"
                            >
                                {{ item.text }}
                            </span>
                        </div>
                        <div class="news-content-contain flex-row-start">
                            <div class="news-img-contain">
                                <img :src="require('../../assets/image/enterprise/' + newsImg[newsActive])"
                                     class="responsive-img-fit">
                            </div>
                            <ul class="news-text-contain block">
                                <li v-for="(item, newIndex) in newsList" :key="newIndex" class="pt35">
                                    <router-link :to="`/information/details?id=${item.id}`" target="_blank" class="flex-row-start">
                                        <div class="time pr10 mr10">
                                            <h2 class="fs32 black bold">
                                                {{item.day}}
                                            </h2>
                                            <p class="fs14 pt5">
                                                {{item.time}}
                                            </p>
                                        </div>
                                        <div class="text">
                                            <h2 class="black overflow-ellipsis pb15">
                                                {{item.title}}
                                            </h2>
                                            <p class="overflow-ellipsis">
                                                {{item.abstractDesc}}
                                            </p>
                                        </div>
                                    </router-link>
                                </li>
                                <li class="pt40 mt5">
                                    <el-button size="mini" round class="green-btns" style="border-radius: 4px;" @click="routerLink('/information')">
                                        了解更多
                                        <i class="el-icon-arrow-right"></i>
                                    </el-button>
                                </li>
                            </ul>

                        </div>
                    </li>
                    <li class="mt130">
                        <div class="flex-column-center">
                            <h2 class="fs36 green1 bold mb10">数据统计</h2>
                            <h2 class="fs14 green2">DATA STATICS</h2>
                           <!-- <img src="@/assets/image/enterprise/sjtj-cn.png" class="mb15" alt="数据统计">
                            <img src="@/assets/image/enterprise/sjtj-en.png" alt="数据统计">-->
                        </div>
                        <a href="http://bigdata.2cnjob.com" target="_blank">
                            <div class="flex-row-space-around pt40 mt40">
                                <img src="@/assets/image/enterprise/data1.png" style="width: 488px;" class="responsive-img">
                                <img src="@/assets/image/enterprise/data2.png" style="width: 470px;" class="responsive-img">
                            </div>
                        </a>
                    </li>
                    <li class="mt130 pb90">
                        <div class="flex-column-center pb40 mb20">
                            <h2 class="fs36 green1 bold mb10">友情链接</h2>
                            <h2 class="fs14 green2">LINK</h2>
                            <!--<img src="@/assets/image/enterprise/yqlj-cn.png" class="mb15" alt="友情链接">
                            <img src="@/assets/image/enterprise/yqlj-en.png" alt="友情链接">-->
                        </div>
                        <ul class="links-contain flex-row-start text-center">
                            <template v-for="(item, index) in youQingList">
                                <a class="links-item pl25" :href="item.imgLink" target="_blank">
                                    <a class="links-item" :href="item.imgLink" target="_blank" style="width: 50px">
                                        <img :src="item.imgUrl"  width="50" height="50" class="mb20">
                                    </a>
                                    <h2 class="fs18 black bold mb15">
                                        {{item.title}}
                                    </h2>
                                   <!-- <p class="fs16">
                                        {{item.abstractDesc}}
                                    </p>-->
                                </a>
<!--                                <a class="links-item" :href="item.imgLink" target="_blank">
                                    <img :src="item.imgUrl" class="responsive-img-fit">
                                </a>-->
                            </template>
                        </ul>
                    </li>
                </ul>
            </div>
        </section>
        <Footer></Footer>
        <el-dialog
            title="企业服务"
            :visible.sync="dialogVisible"
            width="500px">
            <div class="text-center">
                <el-button type="primary" @click="routerLink('/service-search')" size="large">已有申请号</el-button>
                <el-button type="primary" @click="routerLink('/service-apply')" size="large">新申请</el-button>
            </div>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Footer from '@/views/components/header/footer'
import NavIndex from '@/views/components/header/navIndex'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import 'swiper/swiper-bundle.css'
import 'swiper/css/swiper.css'
import { getInEnterprise, getJobInfo, getMLTS } from '@/api/enterprise'
import { bannerList, belongsIndustryList, belongsIndustryList2, companyList } from '@/api/base'
import { list as allPositionList } from '@/api/jobs'
import moment from 'moment'

export default {
    name: 'meIndex',
    components: {
        NavIndex,
        Footer,
        swiper,
        swiperSlide
    },
    data() {
        return {
            nickname: this.$store.getters.nickname,
            accountid: this.$store.getters.accountid,
            swiperOptions: {
                slidesPerView: 3,
                spaceBetween: 20,
                centeredSlides: true,
                pagination: {
                    el: '.swiper-pagination'
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            },
            fonts: '简',
            parkActive: 'taiShang',
            bannerList: [],
            yqInfo: [],
            parkNav: [
                { id: 1, text: '名人风采' },
                { id: 2, text: '五源流长' },
                { id: 3, text: '艺术瑰宝' },
                { id: 4, text: '美食特产' },
                { id: 5, text: '教育文化' }
            ],
            parkNavImg: [
                'parkNav1.png',
                'parkNav2.png',
                'parkNav3.png',
                'parkNav4.png',
                'parkNav5.png'
            ],
            parkNavActive: 0,
            parkInfoList: [],
            AdCarousel: [
                'https://vilson-static.oss-cn-shenzhen.aliyuncs.com/common/banner.png'
            ],
            jobList: [
                { id: 1, text: 'IT/互联网' },
                { id: 2, text: '服务业' },
                { id: 3, text: '汽车/制造业' },
                { id: 4, text: '贸易/零售' },
                { id: 5, text: '房地产/建筑' },
                { id: 6, text: '医疗/化工' },
                { id: 7, text: '消费品' },
                { id: 8, text: '文化/传媒' },
                { id: 9, text: '其他' }
            ],
            jobActive: 1,
            InEnterprise: [],
            newsLabel: [
                { id: 3, text: '新闻动态' },
                { id: 5, text: '通知公告' },
                { id: 4, text: '创业' },
                { id: 6, text: '求学' }
            ],
            newsActive: 0,
            newsImg: [
                'newsImg1.png',
                'newsImg2.png',
                'newsImg3.png',
                'newsImg4.png'
            ],
            allPositionList: [],
            newsList: [],
            yuanquList: [],
            youQingList: [],
            userType: this.$store.getters.userType,
            dialogVisible: false,
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
    filters: {
        setDate(str) {
            return str.substring(8, 10)
        },
        setYearMonth(str) {
            return str.substring(0, 7)
        }
    },
    created() {
        // 获取新闻动态
        this.getNews()
        this.getYuanQuList()

        this.fonts  = this.$store.state.user.language == 's' ? '简'  : '繁'

        let app =  this;
        setInterval(() => {
            app.$zhTran(app.$store.state.user.language)
        }, 500)

        // 获取岗位招聘
        let jobInfoParam = {
            'companyId': '',
            'limit': 0,
            'page': 0
        }
        // getJobInfo(jobInfoParam).then(res => {
        //     this.jobInfo = res.data
        // })
        this.getBannerList()
        this.getTaiShangList()
        //行业
        this.getBelongsIndustryList()
        //公司
        this.getCompanyList()
        this.getYouqing()
    },
    watch: {
        jobActive() {
            this.getAllPositionList()
        },
        parkNavActive() {
            this.getTaiShangList()
        },
        newsActive() {
            this.getNews()
        }
    },
    methods: {
        setFont(val) {
            this.fonts = val
            const type = val == '繁' ? 't' : 's';
            this.$zhTran(type)
            this.$store.dispatch('setLanguage', type);
        },
        getBannerList() {
            bannerList({ limit: 10, page: 1 }).then(res => {
                this.bannerList = res.datas
            })
        },
        getTaiShangList() {
            let tsParams = {
                'bigCategory': '1',
                'limit': 2,
                'page': 1,
                'smallCategory': this.parkNav[this.parkNavActive].text
            }
            getMLTS(tsParams).then(res => {
                this.parkInfoList = res.data
            })
        },
        getYuanQuList() {
            let tsParams = {
                'bigCategory': '2',
                'limit': 5,
                'page': 1
            }
            getMLTS(tsParams).then(res => {
                this.yuanquList = res.data
            })
        },
        // 获取相关资讯
        getNews() {
            getMLTS({
                'bigCategory': this.newsLabel[this.newsActive].id,
                'limit': 3,
                'page': 1
            }).then(res => {
                res.data.forEach(v => {
                    v.day = v.releaseTime ? moment(v.releaseTime).format('DD') : '06'
                    v.time = v.releaseTime ? moment(v.releaseTime).format('YYYY.MM') : '2020.06'
                })
                this.newsList = res.data
            })
        },
        getYouqing() {
            getMLTS({
                'bigCategory': 7,
                'limit': 1000,
                'page': 1
            }).then(res => {
                this.youQingList = res.data
            })
        },
        getBelongsIndustryList() {
            belongsIndustryList2({page: 6}).then(res => {
                this.jobList = res.datas[0].children
                this.jobActive = ''
                // this.jobActive = res[0].id;
                this.getAllPositionList()
            })
        },
        getAllPositionList() {
            allPositionList({ page: 1, limit: 9, belongsIndustry: this.jobActive }).then(res => {
                this.allPositionList = res.data
            })
        },
        getCompanyList() {
            companyList({ page: 1, limit: 6 }).then(res => {
                console.log(res);
                this.InEnterprise = res.datas
            })
        },


    }
}
</script>

<style lang="scss">
@import url('../../assets/styles/enterprise/common.css');

.column-line {
    height: 14px;
    border-right: 1px solid var(--green);
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
    margin-left: 20px;
    margin-right: 0px;
}
.el-carousel__button {
    width: 14px;
    height: 14px;
    background: transparent;
    border-radius: 100%;
    border: 3px solid #9A9A9A;
}

.el-carousel__indicator.is-active button {
    border: 3px solid #fff;
}

.el-carousel__indicators--horizontal {
    bottom: 80px;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: 0px;
    top: 110px;
    background: rgba(0, 0, 0, 0.49);
    width: 35px !important;
    height: 70px !important;
    border-radius: 0 100px 100px 0;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: 0px;
    top: 110px;
    background: rgba(0, 0, 0, 0.49);
    width: 35px !important;
    height: 70px !important;
    border-radius: 100px 0 0 100px;
}

.swiper-button-prev:after, .swiper-button-next:after {
    font-size: 18px;
}

.enterprise-index {
    .yuan-qu-contain {
        .yuan-qu-item {
            width: 386px;
            height: 245px;

            img {
                border-radius: 12px;
            }
        }
    }

    .mb45 {
        margin-bottom: 45px;
    }

    .fs32 {
        font-size: 32px;
    }

    .fw400 {
        font-weight: 400;
    }

    .green-btns {
        border: 1px solid #5E9F8E;
        color: #5E9F8E;
    }

    .mt130 {
        margin-top: 130px;
    }

    .pb90 {
        padding-bottom: 90px;
    }

    header {
        height: 68px;
        background: url('../../assets/image/enterprise/header.png') no-repeat;
        background-size: 100% 100%;
        padding-left: 34px;
        padding-right: 129px;
        position: absolute;
        width: 100%;
        z-index: 10;

        .logo-contain {
            width: 150px;
            height: 68px;


            .logo {
                width: 100%;
                height: 24px;
                background: url('../../assets/logo/logo-new.png') no-repeat;
                background-size: 100%;
            }
        }

        .tool {
            .icon-contain {
                height: 24px;
                width: 24px;
            }

            .wechat-icon {
                background: url('../../assets/image/enterprise/wechat.png') no-repeat;
                background-size: 100% 100%;
            }

            .QQ-icon {
                background: url('../../assets/image/enterprise/QQ.png') no-repeat;
                background-size: 100% 100%;
            }

            .phone-icon {
                background: url('../../assets/image/enterprise/phone.png') no-repeat;
                background-size: 100% 100%;
            }
        }
    }

    .ad-carousel-contain {
        height: 719px;
        position: relative;

        .ad-tool {
            width: 100%;
            min-width: 1200px;
            position: absolute;
            top: 145px;
            z-index: 100;

            .jobActive {
                font-size: 26px;
                color: #fff;
            }

            .search-contain {
                margin-bottom: 72px;

                .search-input-contain {
                    width: 539px;
                    height: 62px;
                    padding-top: 12px;
                    padding-left: 38px;

                    input {
                        width: 495px;
                        height: 48px;
                        font-size: 18px;
                        border-width: 0px !important;
                        background: transparent;
                        outline: none;
                        color: #fff;
                    }

                    input::-webkit-input-placeholder {
                        color: #fff;
                    }
                }

                .job-search-bg {
                    background: url('../../assets/image/enterprise/search-bg.png') no-repeat;
                    background-size: 100% 100%;
                }

                .search-button-contain {
                    width: 88px;
                    height: 52px;
                    background: url('../../assets/image/enterprise/search-button-bg.png') no-repeat;

                    button {
                        background: transparent;
                        width: 88px;
                        height: 52px;
                        border-width: 0px !important;
                        outline: none;

                        .search-button-icons {
                            width: 27px;
                            height: 28px;
                            background: url('../../assets/image/enterprise/search-button-icons.png') no-repeat;
                        }
                    }
                }
            }

            .ad-title {
                width: 909px;
                height: 69px;
                background: url('../../assets/image/enterprise/ad-title.png') no-repeat;
                background-size: 100% 100%;
                margin-bottom: 50px;
            }
        }

        nav {
            width: 1006px;
            height: 207px;
            position: absolute;
            left: calc(50vw - 503px);
            bottom: -128px;
            padding-top: 58px;
            padding-left: 75px;
            padding-right: 75px;
            z-index: 105;
            background: url('../../assets/image/enterprise/nav-bg.png') no-repeat;
            background-size: 100% 80%;

            .nav-item {
                height: 48px;
            }

            .nav-item.acive {
                color: #66B09E;
            }

            .nav-item.acive:after {
                display: block;
                margin: 10px auto;
                content: "";
                width: 20px;
                height: 4px;
                background: #3EACC4;
                border-radius: 4px;
            }

            .nav-item:hover {
                color: #66B09E;
            }
        }
    }

    .container {
        padding-top: 150px;
        width: 1200px;
        margin: 0 auto;

        .mlts-btns-contain {
            padding-left: 260px;
            padding-right: 260px;
            padding-bottom: 35px;

            .mlts-btns {
                width: 246px;
                height: 65px;
                background: #EDEDED;
                font-size: 24px;
                font-weight: 400;
                color: #343434;
                line-height: 65px;
                border-radius: 5px;
            }

            .mlts-btns.active {
                background: #3DABC4;
                color: #fff;
            }
        }

        .mlts-detail {
            .mlts-img-contain {
                width: 584px;
                height: 315px;
                position: relative;

                ul {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 133px;
                    height: 315px;
                    background: rgba(0, 0, 0, 0.49);
                    border-radius: 10px 0px 0px 10px;

                    li.active {
                        color: #CE3A5C;
                        font-size: 24px;
                        font-weight: bold;
                    }
                }
            }

            .mlts-text-contain {
                width: 589px;
                height: 315px;

                .title-text {
                    color: #121212
                }

                .content-text {
                    color: #787878;
                    line-height: 1.8em;
                }
            }
        }

        .job-item.job-active, .job-item:hover {
            color: #CE3A5C;
            font-weight: bold;
        }

        .gwzp-detail-item {
            width: 385px;
            height: 120px;
            position: relative;
            background: #F9F9F9;
            padding-top: 33px;
            padding-left: 25px;
            padding-bottom: 30px;

            .price-contain {
                width: 96px;
                height: 33px;
                line-height: 33px;
                position: absolute;
                right: 0px;
                top: 27px;
                background: url('../../assets/image/enterprise/price-bg.png') no-repeat;
                background-size: 100% 100%;
            }
        }

        .gwzp-see-more {
            width: 200px;
            height: 42px;
            line-height: 42px;
            background: url('../../assets/image/enterprise/gwzp-see-more-bg.png') no-repeat;
            background-size: 100% 100%;
        }

        .rzqy-detail-item {
            width: 385px;
            height: 245px;

            .company-text-contain {
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
                background: #3DABC4;

                .logo-contain {
                    width: 40px;
                    height: 40px;
                }
            }

            .pl50 {
                padding-left: 50px;
            }

            .pr50 {
                padding-right: 50px;
            }

            .labels-contain {
                height: 69px;
                overflow-y: hidden;
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;
                border: 1px dashed #5EA08E;
                border-width: 0 1px 1px 1px;

                label {
                    color: #5EA08E;
                    border: 1px solid #5EA08E;
                    border-radius: 30px;
                    margin-bottom: 5px;
                    width: 110px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    text-align: center;
                }

            }
        }

        .xgzx-labels-contain {
            span {
                width: 245px;
                border-radius: 6px;
            }

            .news-active {
                background: #3DABC4;
                color: #fff;
            }
        }

        .news-content-contain {
            .news-img-contain {
                width: 550px;
                height: 360px;
            }

            .news-text-contain {
                width: 580px;
                height: 360px;
                padding-left: 70px;

                .time {
                    height: 60px;
                    border-right: 2px solid #343434;
                }

                .text {
                    width: 410px;
                }
            }
        }

        .links-contain {
            .links-item {
                width: 300px;
                //height: 185px;
            }
        }
    }

    .sec-nav {
        img:hover {
            transition : all 0.3s;
            transform: scale(1.2);
        }
    }
}
</style>
